<!DOCTYPE html>
<html>

    <head>
        <title>AA计算器</title>
        <meta charset="utf-8">

        <style>
            table {
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ccc;
                padding: 5px;
            }
            input[type="number"] {
                width: 60px;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <h1>AA计算器</h1>

        <p>总金额:<input type="number" id="total"></p>
        <table>
            <thead>
                <tr>
                    <th>名字</th>
                    <th>比例</th>
                    <th>金额</th>
                </tr>
            </thead>
            <tbody id="participant-table"></tbody>
        </table>

        <p><button onclick="addParticipant()">添加</button></p >
        <p><button onclick="calculate()">计算</ button></p >

        <script>
            function addParticipant(){
                var tbody = document.getElementById("participant-table");
                var row = tbody.insertRow(-1);
                var nameCell= row.insertCell(0);
                var shareCell = row.insertCell(1);
                var amountCell = row.insertCell(2);

                var nameInput = document.createElement("input");
                nameInput.type = "text";
                nameInput.placeholder= "名字";
                nameCell.appendChild(nameInput);

                var shareInput = document.createElement("input");
                shareInput.type = "number";
                shareInput.value = 0;
                shareInput.min = 0;
                shareInput.max = 100;
                shareInput.oninput= function() {
                    calculate();
                }
                shareCell.appendChild(shareInput);

                var amountSpan = document.createElement("span");
                amountCell.appendChild(amountSpan);
            }

            function calculate() {

                var tbody = document.getElementById("participant-table");
                var total = document.getElementById("total").value;

                var sumShare = 0;
                var sumAmount = 0;
                var participantCount = tbody.rows.length;
                for(var i=0;i< participantCount; i++) {
                    var shareInput = tbody.rows[i].cells[1].getElementsByTagName("input")[0];
                    var amountSpan = tbody.rows[i].cells[2].getElementsByTagName("span")[0];
                    var share = parseFloat(shareInput.value);
                    if (share >0){
                        sumShare +=share;
                    }
                }

                for (var i=0;i< participantCount; i++){
                    var shareInput = tbody.rows[i].cells[1].getElementsByTagName("input")[0];
                    var amountSpan = tbody.rows[i].cells[2].getElementsByTagName("span")[0];
                    var share = parseFloat(shareInput.value);

                    if (share > 0) {
                        var amount = parseFloat(total) * share / sumShare;
                        amountSpan.textContent = amount.toFixed(2);
                        sumAmount += amount;
                    }else{
                        amountSpan.textContent="";
                    }
                }
            }
        </script>
    </body>
</html>
